<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <van-icon name="arrow-left" size="34" @click="goBack" />
            <div class="title">实名认证</div>
            <div></div>
        </div>

        <div class="verification-content">
            <!-- 认证状态提示 -->
            <div v-if="isVerified" class="verification-status">
                <van-icon name="checked" color="#07c160" size="48" />
                <div class="status-text">
                    <div class="status-title">您已完成实名认证</div>
                    <div class="status-desc">认证姓名：{{ userRealName }}</div>
                </div>
                <van-button 
                    type="danger" 
                    size="small" 
                    class="cancel-verify-btn"
                    @click="cancelVerification">注销认证</van-button>
            </div>
            
            <!-- 认证说明 -->
            <div class="verification-notice" :class="{ 'verified': isVerified }">
                <div class="notice-title">
                    <van-icon name="info-o" color="#1989fa" />
                    <span>认证说明</span>
                </div>
                <div class="notice-text">
                    根据相关法律法规要求，用户需完成实名认证才能继续使用完整服务。您的信息将被严格保密。
                </div>
            </div>

            <!-- 认证表单 -->
            <div class="verification-form">
                <div class="form-item">
                    <div class="item-label">真实姓名</div>
                    <van-field
                        v-model="form.name"
                        placeholder="请输入您的真实姓名"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                    />
                </div>
                
                <div class="form-item">
                    <div class="item-label">身份证号码</div>
                    <van-field
                        v-model="form.idCard"
                        placeholder="请输入您的身份证号码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                        maxlength="18"
                    />
                    <div v-if="form.idCard && !isValidIdCard" class="error-tips">
                        请输入正确的身份证号码
                    </div>
                </div>
                
                <div class="form-item">
                    <div class="item-label">手机号码</div>
                    <van-field
                        v-model="form.phone"
                        placeholder="请输入您的手机号码"
                        clearable
                        input-align="left"
                        :style="{ fontSize: '28px' }"
                    />
                </div>
                
                <div class="form-item">
                    <div class="item-label">短信验证码</div>
                    <div class="sms-field">
                        <van-field
                            v-model="form.smsCode"
                            placeholder="请输入验证码"
                            clearable
                            input-align="left"
                            :style="{ fontSize: '28px' }"
                        />
                        <van-button 
                            size="small" 
                            class="sms-btn" 
                            @click="getSmsCode" 
                            :disabled="smsButtonDisabled || form.phone.length !== 11 || !isValidIdCardAndPhone"
                            :style="{
                                background: isValidIdCardAndPhone ? '#FEE543' : '#FFF6B8',
                                color: '#333',
                                border: 'none'
                            }"
                        >{{ smsButtonText }}</van-button>
                    </div>
                </div>
                
                <div class="form-agreement">
                    <van-checkbox v-model="form.agreement" icon-size="24px">
                        <span>我已阅读并同意<span class="agreement-link">《用户实名认证协议》</span></span>
                    </van-checkbox>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-btn">
                <van-button 
                    type="primary" 
                    block 
                    @click="submitVerification" 
                    :disabled="!canSubmit"
                    :style="{
                        background: canSubmit ? '#FEE543' : '#FFF6B8',
                        color: '#333',
                        border: 'none'
                    }"
                >提交认证</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Icon, Button, Field, Checkbox, Toast, Dialog } from 'vant';

export default {
    name: 'VerificationPage',
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button,
        [Field.name]: Field,
        [Checkbox.name]: Checkbox
    },
    computed: {
        isValidIdCard() {
            // 身份证号正则表达式
            const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            return this.form.idCard ? idCardReg.test(this.form.idCard) : true;
        },
        isValidIdCardAndPhone() {
            // 同时验证手机号和身份证是否有效
            return this.form.phone.length === 11 && this.form.idCard && this.isValidIdCard;
        },
        canSubmit() {
            return (
                this.form.name && 
                this.form.idCard && 
                this.isValidIdCard && 
                this.form.phone && 
                this.form.phone.length === 11 && 
                this.form.smsCode && 
                this.form.agreement
            );
        }
    },
    watch: {
        'form.phone': function(newVal) {
            // 自动格式化手机号，只允许输入数字
            this.form.phone = newVal.replace(/\D/g, '').substring(0, 11);
        }
    },
    data() {
        return {
            form: {
                name: '',
                idCard: '',
                phone: '',
                smsCode: '',
                agreement: false
            },
            smsCodeTimer: null,
            smsButtonText: '获取验证码',
            smsButtonDisabled: false,
            countDown: 60,
            isVerified: false,
            userRealName: ''
        };
    },
    created() {
        this.checkVerificationStatus();
    },
    methods: {
        checkVerificationStatus() {
            // 从本地存储获取实名认证状态
            const verified = localStorage.getItem('userVerified') === 'true';
            const realName = localStorage.getItem('userRealName');
            
            this.isVerified = verified;
            this.userRealName = realName || '';
            
            // 如果已认证，预填表单
            if (this.isVerified && this.userRealName) {
                this.form.name = this.userRealName;
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        generateRandomCode() {
            return Math.floor(100000 + Math.random() * 900000).toString();
        },
        getSmsCode() {
            // 手机号码验证
            if (!this.form.phone || this.form.phone.length !== 11) {
                Toast('请输入正确的手机号码');
                return;
            }
            
            // 生成随机验证码
            const randomCode = this.generateRandomCode();
            
            // 直接填入验证码
            this.form.smsCode = randomCode;
            
            // 显示短暂提示
            Toast({
                message: '验证码已发送',
                icon: 'passed',
                className: 'custom-toast'
            });
            
            // 倒计时
            this.smsButtonDisabled = true;
            this.countDown = 60;
            this.smsButtonText = `${this.countDown}秒后重新获取`;
            
            this.smsCodeTimer = setInterval(() => {
                this.countDown--;
                this.smsButtonText = `${this.countDown}秒后重新获取`;
                
                if (this.countDown <= 0) {
                    clearInterval(this.smsCodeTimer);
                    this.smsButtonDisabled = false;
                    this.smsButtonText = '获取验证码';
                }
            }, 1000);
        },
        submitVerification() {
            if (!this.form.name) {
                Toast('请输入真实姓名');
                return;
            }
            
            if (!this.form.idCard) {
                Toast('请输入身份证号码');
                return;
            }
            
            if (!this.form.phone) {
                Toast('请输入手机号码');
                return;
            }
            
            if (!this.form.smsCode) {
                Toast('请输入验证码');
                return;
            }
            
            if (!this.form.agreement) {
                Toast('请先阅读并同意用户实名认证协议');
                return;
            }
            
            // 直接保存实名认证信息到本地存储，无需弹窗
            localStorage.setItem('userRealName', this.form.name);
            localStorage.setItem('userVerified', 'true');
            
            // 直接返回上一页
            this.$router.go(-1);
        },
        cancelVerification() {
            // 直接执行注销操作，无需确认对话框
            
            // 清除本地存储的认证信息
            localStorage.removeItem('userRealName');
            localStorage.removeItem('userVerified');
            
            // 重置页面状态
            this.isVerified = false;
            this.userRealName = '';
            this.form = {
                name: '',
                idCard: '',
                phone: '',
                smsCode: '',
                agreement: false
            };
        }
    },
    beforeDestroy() {
        // 清除定时器
        if (this.smsCodeTimer) {
            clearInterval(this.smsCodeTimer);
        }
    }
}
</script>

<style lang="less">
// 全局样式，不使用scoped
.verification-dialog {
    .van-dialog__header {
        font-weight: bold;
        padding: 24px 0 8px;
        font-size: 34px !important;
        color: #333;
    }
    
    .van-button--default {
        border-color: #ff8200;
    }
    
    .van-dialog__message {
        padding: 16px 32px 32px;
    }
    
    .custom-code-dialog {
        text-align: center;
        
        .code-title {
            font-size: 28px;
            color: #666;
            margin-bottom: 20px;
        }
        
        .code-number {
            font-size: 48px;
            font-weight: bold;
            color: #ff8200;
            letter-spacing: 8px;
            margin: 20px 0;
            font-family: monospace;
        }
        
        .code-tip {
            font-size: 24px;
            color: #999;
            margin-top: 20px;
        }
    }
}
</style>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
    font-family: "正楷";
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .title {
        font-size: 36px;
        font-weight: 500;
    }
}

.verification-content {
    margin-top: 108px;
    padding: 0 32px;
}

.verification-status {
    display: flex;
    align-items: center;
    background-color: #f0f9eb;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    
    .status-text {
        margin-left: 24px;
        flex: 1;
        
        .status-title {
            font-size: 32px;
            font-weight: 500;
            color: #07c160;
            margin-bottom: 8px;
        }
        
        .status-desc {
            font-size: 28px;
            color: #333;
        }
    }
    
    .cancel-verify-btn {
        height: 60px;
        font-size: 24px;
        border-radius: 30px;
        padding: 0 20px;
    }
}

.verification-notice {
    background-color: #e6f7ff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;

    .notice-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        font-size: 30px;
        font-weight: 500;
        color: #1989fa;
    }

    .notice-text {
        font-size: 26px;
        color: #666;
        line-height: 1.5;
    }

    &.verified {
        background-color: #f5f5f5;
        opacity: 0.8;
    }
}

.verification-form {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;

    .form-item {
        margin-bottom: 40px;

        .item-label {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
        }

        .sms-field {
            display: flex;
            gap: 16px;

            .van-field {
                flex: 1;
            }

            .sms-btn {
                width: 160px;
                height: 72px;
                border-radius: 8px;
                font-size: 24px;
            }
        }
    }

    // 增强输入框样式
    :deep(.van-field__control) {
        height: 65px;
        line-height: 65px;
    }
    
    :deep(.van-cell) {
        padding: 10px 16px;
        border-radius: 12px;
        background-color: #f8f8f8;
        border: none;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        margin: 6px 0;
    }
    
    :deep(.van-checkbox__label) {
        font-size: 28px;
        color: #666;
        padding: 10px 0;
    }
    
    :deep(.van-checkbox__icon) {
        height: 24px;
        width: 24px;
        line-height: 24px;
    }
    
    .agreement-link {
        color: #ff8200;
    }
    
    .form-item {
        .sms-btn {
            background: linear-gradient(to right, #ff8200, #ff5000);
            border: none;
            box-shadow: 0 4px 8px rgba(255, 130, 0, 0.2);
        }
    }
    
    .cancel-verify-btn {
        background: #fff;
        color: #ff5000;
        border: 1px solid #ff5000;
        font-weight: 500;
        
        &:active {
            background-color: #fff5f0;
        }
    }
}

.submit-btn {
    padding: 0 32px;
    margin-bottom: 40px;

    .van-button {
        height: 88px;
        line-height: 88px;
        font-size: 32px;
        border-radius: 44px;
        box-shadow: 0 6px 12px rgba(255, 200, 0, 0.2);
        
        &:disabled {
            opacity: 1;
        }
    }
}

.error-tips {
    color: #f44;
    font-size: 24px;
    margin-top: 8px;
    padding-left: 10px;
}
</style> 